<template>
  <div class="detail">
    <header>
      <div class="return" :style="styleOpacity">
        <i
            class="iconfont icon-fanhui"
            @click="goBack"
            :style="iStyle"
        ></i>
        <ul v-show="isHeader"
            v-for="(item,index) in headerList" :key="index"
        >
          <li :class="{active: index==currentIndex}"  @click="goScroll(index)">{{ item }}</li>
        </ul>
        <i
            class="iconfont icon-fenxiang"
            :style="iStyle"
            @click="toShare"
        ></i>
      </div>
    </header>
    <section ref="main">
      <div class="detail-main">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide>
            <img :src="goods.imgUrl">
          </swiper-slide>
          <swiper-slide>
            <img :src="goods.imgUrl2">
          </swiper-slide>
          <swiper-slide>
            <img :src="goods.imgUrl3">
          </swiper-slide>
          <swiper-slide>
            <img :src="goods.imgUrl4">
          </swiper-slide>
          <swiper-slide>
            <img :src="goods.imgUrl5">
          </swiper-slide>
          <swiper-slide>
            <img :src="goods.imgUrl6">
          </swiper-slide>
          <swiper-slide>
            <img :src="goods.imgUrl7">
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <div class="shop-msg">
          <h2 class="name">{{goods.name}}</h2>
          <p class="price">{{goods.price}} RMB</p>
          <p class="content">{{goods.content}}</p>
        </div>
        <div class="judge">
          <h2>宝贝评价</h2>
          <p>
            耳机很nice！！！
          </p>
        </div>
        <div class="details">
          <!--    测试-->
          <img :src="goods.imgUrl">
          <img :src="goods.imgUrl">
          <img :src="goods.imgUrl">
        </div>
      </div>
    </section>
    <footer>
      <ul>
        <li class="cart" @click="goCart()">购物车</li>
        <li class="addcart" @click="showPop()">加入购物车</li>
      </ul>
    </footer>
    <!--    分享-->
    <div class="mask" v-show="isSheet" @click="ShareClose"></div>
    <transition
        enter-active-class="animate__animated animate__slideInUp"
        leave-active-class="animate__animated animate__slideOutDown"
    >
      <div class="detail-sheet" v-show="isSheet">
        <h3>分享</h3>
        <share :shareSites="shareSites"></share>
        <div class="sheet-close" @click="ShareClose">取消</div>
      </div>
    </transition>
    <!--    加入购物车-->
    <div class="mask" v-show="isShow" @click="ShareClose"></div>
    <transition
        enter-active-class="animate__animated animate__slideInUp"
        leave-active-class="animate__animated animate__slideOutDown"
    >
      <div class="detail-sheet" v-show="isShow">
        <div>
          <img :src="goods.imgUrl">
        </div>
        <div>
          <el-input-number v-model="num" :min="1"></el-input-number>
        </div>
        <div class="add" @click="addCart()">加入购物车</div>
      </div>
    </transition>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import BScroll from 'better-scroll'
import share from 'vue-shares'
import {api1} from "@/common/api/request";
import {Toast} from "mint-ui";
export default {
  name: "Detail",
  data(){
    return{
      isHeader:false,
      headerList:['商品','评价','详情'],
      allHeight:[], //滚动数组的高
      scrollY: 0, //滚动值
      styleOpacity:{},
      iStyle: {},
      isSheet:false,
      isShow:false,
      shareSites:['wechat','weibo','qq',''],
      goods:'',
      num:1,
      BScrollDetail:'',
      swiperOption: {
        pagination: {
          el:'.swiper-pagination',
          type:"fraction",
          clickable:true
        },
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }
      }
    }
  },
  computed:{
    currentIndex:{
      get(){
        return this.allHeight.findIndex((item,index)=>{
          return this.scrollY >= item && this.scrollY < this.allHeight[index+1]
        })
      },
      set(){}
    }
  },
  components: {
    swiper,
    swiperSlide,
    share
  },
  created() {
    this.getData()
  },
  methods:{
    goBack(){
      this.$router.back()
    },
    goScroll(index){
      this.currentIndex = index
      this.BScrollDetail.scrollTo(0, -this.allHeight[index], 300)
    },
    showPop(){
      this.isShow = true
    },
    goCart(){
      this.$router.push('/cart')
    },
    toShare(){
      this.isSheet = true
    },
    ShareClose(){
      this.isSheet = false
      this.isShow = false
    },
    reduce(){
      this.num--
    },
    add(){
      this.num++
    },
    //加入购物车
    addCart(){
      //隐藏弹出层
      this.isShow = false
      //发送请求
      api1({
        url: '/api/addCart',
        method:'POST',
        data:{
          goodsId: this.goods.id,
          goodsNum: this.num
        },
        headers:{
          token: true
        }
      }).then(res => {
        if(res.success){
          Toast(res.msg)
        }
      })
    },
    getData(){
      api1({
        url: '/api/goods/id',
        params:{
          id: this.$route.query.id
        }
      }).then(res => {
        this.goods = res[0]
        this.$nextTick(() => {
          //滚动
          this.BScrollDetail = new BScroll(this.$refs.main,{
            click:true,
            probeType:3
          })
          //导航显示
          this.BScrollDetail.on('scroll',(pos)=>{
            let posY = Math.abs(pos.y)
            let opacity = posY / 160
            opacity = opacity >1 ? 1 :opacity
            if(posY >= 50){
              this.isHeader = true
              this.styleOpacity = {
                opacity:opacity,
                color:'#000',
                background:'#fff'
              }
            }else{
              this.isHeader = false
              this.styleOpacity = {
                opacity: 1
              }
            }
          })
          //导航到对应位置
          let height = 0;
          this.allHeight.push(height);
          //获取到每一个元素块所有高度
          let uls = this.$refs.main.getElementsByClassName('detail-main');
          Array.from(uls).forEach(v=>{
            height += v.clientHeight
            this.allHeight.push(height)
          })
          console.log(this.allHeight)
          //滑动==》对应显示
          this.BScrollDetail.on('scroll',(pos)=>{
            this.scrollY = Math.abs(pos.y)
          })
        })
      })
    },
  }
}
</script>

<style scoped lang="scss">
.detail{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.active{
  color: red;
}
.return{
  position: fixed;
  left: 0;
  right: 0;
  z-index: 888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  opacity: 1;
  ul{
    display: flex;
    li{
      margin: 0 6px;
    }
  }
}
section{
  margin-top: 40px;
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 0;
  text-align: center;
  background-color: #F4F4F4;
  img{
    width: 375px;
    height: 375px;
  }
  .shop-msg{
    display: flex;
    flex-direction: column;
    text-align: left;
    border: 1px solid #F4F4F4;
    border-radius: 16px;
    background-color: #FFFFFF;
    margin: 4px;
    padding: 10px;
    .name{
      margin: 6px;
      color: red;
    }
    .price{
      margin: 10px;
      font-size: 20px;
      color: orangered;
    }
    .content{
      margin: 10px;
      font-size: 18px;
      color: saddlebrown;
    }
  }
  .judge{
    margin: 4px;
    border: 1px solid #F4F4F4;
    border-radius: 16px;
    background-color: #FFFFFF;
  }
  .details{
    margin: 4px;
    border: 1px solid #F4F4F4;
    border-radius: 16px;
    background-color: #FFFFFF;
  }
}
.swiper-pagination{
  text-align: right;
}
.mask{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  z-index:997;
}
.detail-sheet{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  img{
    width: 80px;
    height: 80px;
  }
  .add{
    width: 50%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    margin-top: 24px;
    color: #F4F4F4;
    background-color: orange;
  }
}
.sheet-close{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
  border-top: 1px solid #cccccc;
}
footer{
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background-color: #F4F4F4;
  ul{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .cart{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30px 0 0 30px;
      width: 50%;
      height: 100%;
      color: #F4F4F4;
      background-color: orange;
    }
    .addcart{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 30px 30px 0;
      width: 50%;
      height: 100%;
      color: #F4F4F4;
      background-color: orangered;
    }
  }
}
</style>